<template>
  <div class="gm-ss">
    <loading v-if="!ssData" />
    <div class="info-text" v-else-if="!ssData.length">
      <p>
        <i class="el-icon-star-off"></i>
      </p>
      <p>
        没有获取到您的
        <span>说说</span>数据，请前往导航栏的管理数据-
        <span>说说操作</span>版块进行完善。
      </p>
      <p>
        <router-link to="/users/gm_ss">或者点击这里完善资料</router-link>
      </p>
    </div>
    <ul class="item" v-else>
      <li v-for="data in ssData" :key="data.id" class="list">
        <div class="title">
          <i v-if="data.hot" class="el-icon-star-on"></i>
          <span>{{ data.label }}</span>
        </div>
        <div class="body">
          <span>{{ data.body }}</span>
        </div>
        <div class="desc">
          <img :src="data.moodIconNum | icon" alt :title="data.mood" />
          <span>发表时间：{{ data.created | setDate }}</span>
          <span>更新时间：{{ data.updated | setDate }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from "Vuex";

export default {
  name: "gm-ss",

  data() {
    return {};
  },
  mounted() {
    if (this.userName) {
      if (!this.ssData.length) {
        this.getSsData(this.userName);
      }
    }
  },
  watch: {
    userName() {
      if (this.userName) {
        if (!this.ssData.length) {
          this.getSsData(this.userName);
        }
      }
    }
  },
  methods: {
    ...mapActions("user", ["getSsData"])
  },
  computed: {
    ...mapState("user", ["ssData", "userName"])
  },
  filters: {
    icon(num) {
      return require(`@/assets/${num}.png`);
    }
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.gm-ss
  width: 100%
  height: 100%
  background-color: #fff
  .info-text
    width: 100%
    height: 100%
    padding: 20%
    @include align(flex-start)
    >p
      flex: 0 0 100%
      width: 100%
      height: 40px
      line-height: 40px
      font-size: 16px
      overflow: hidden
      >a
        color: #0487dc
        &:hover
          color: #2eb037
      >i
        font-size: 24px
      >span
        color: #2eb037
  .item
    width: 100%
    .list
      padding: 10px 40px
      width: 100%
      border-bottom: 1px solid #f6f6f6
      .title
        width: 100%
        height: 40px
        line-height: 40px
        @include flex(flex-start,center)
        >i
          color: #f44444
          font-size: 21px
          margin-right: 10px
        >span
          font-size: 19px
          color: #3d3d3d
          font-weight: 700
      .body
        width: 100%
        color: #8a8a8a
        line-height: 35px
      .desc
        width: 100%
        height: 50px
        line-height: 40px
        @include flex(space-between,center)
        >img
          width: 26px
          height: 26px
</style>